<template>
  <div class='page '>
    <el-container>
      <el-header>
        <div class="headerMenu">
          <el-row>
            <el-col :span="22">
              <div class="grid-content bg-purple-dark" style="line-height:50px;">
                <el-row>
                  <el-col :span="3" style="width:220px;">
                    <img src="../../assets/images/logo.png" alt="" srcset="" height="20px">
                    <span style="color:#fff">弛怀运营管理系统</span>
                  </el-col>
                  <el-col :span="1">
                    <i class="iconfont" style="color:#fff" @click="getMenu">&#xe62c;</i>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="2">
              <div class="grid-content bg-purple-dark" style="line-height:50px;">
                <i class="iconfont" style="color:#fff">&#xe801;</i>
                <el-dropdown>
                            <span class="el-dropdown-link f-cursor" @click="displayUser" style="color:#fff">
                                {{username}}
                            </span>
                  <el-dropdown-menu slot="dropdown" style="padding-top:-9px">
                    <el-dropdown-item @click.native="layout" split-button=true>退出</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-container>
        <el-aside class="aside dis-over-auto" width="220px" :class=" isCollapse ? contentViewB: contentViewA">
          <el-menu :style="menuStyle"
                            :unique-opened="true"
                            :default-active=activeMenuName
                            :collapse="isCollapse"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="#393e46"
                            text-color="#fff"
                            active-text-color="#409EFF">
        <el-submenu v-for="(item,index) in Navigation" :key='index' :index="item.id+''">
          <template slot="title">
            <i v-if="index == 0" class="el-icon-document"></i>
            <i v-if="index == 1" class="el-icon-menu"></i>
            <i v-if="index == 2" class="el-icon-sold-out"></i>
            <i v-if="index == 3" class="iconfont" style="margin-right:10px;">&#xe603;</i>
            <i v-if="index == 4" class="el-icon-phone-outline"></i>
            <i v-if="index == 5" class="el-icon-goods"></i>
            <i v-if="index == 6" class="el-icon-setting"></i>
            <i v-if="index == 7" class="el-icon-bell"></i>
            <span>{{item.name}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item v-for="(val,i) in item.childMenu"
                          :key="i+100"
                          :index="val.id+''"
                          @click="jumpNavSwitch(val.resUrl,val.name,val.id+'')">
              {{val.name}}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
        </el-aside>
        <el-main class="contentView">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  import {A_Tabs} from 'store/tabs/type.js'
  import {localStorage} from 'js/localStorage'
  import {G_Tabs} from "../../store/tabs/type";
  import {mapActions, mapGetters} from 'vuex'

  export default {
    data() {
      return {
        scrollTop: 0,
        editableTabsValue: '',
        menuStyle: {},
        activeMenuName: "商品信息",
        Navigation: [],
        username: '',
        isCollapse: false,
        contentViewB: 'contentViewB',
        contentViewA: 'contentViewA'
      }
    },
    computed: {
      ...mapGetters([
        G_Tabs,
      ]),
    },
    watch: {
      '$route': function (to) {
        let that_ = this;
        this.scrollTop = 0;
        that_.menuStyle = {
          height: window.innerHeight - 50 + 'px'
        };
        window.onscroll = function () {
          let scrollHeight = document.body.scrollHeight;
          that_.menuStyle = {
            height: scrollHeight - 50 + 'px'
          }
        };
        window.onresize = function () {
          that_.scrollTop = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageXOffset);
          that_.menuStyle = {
            height: window.innerHeight + that_.scrollTop - 50 + 'px'
          }
        };
        this.A_Tabs({
          "path": to.path,
          "name": to.name
        });
      }
    },
    mounted() {
      this.scrollTop = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageXOffset);
      this.menuStyle = {
        height: window.innerHeight + this.scrollTop - 50 + 'px'
      }

      let activeName = localStorage.get('activeName');

      this.activeMenuName = activeName;
      // if(activeName  !== "2"){
      //   this.activeMenuName = "2";
      // }
      if (!activeName) {
        this.activeMenuName = "2";
      }
      this.username = localStorage.get('user')
      let addressUrl = localStorage.get('url')
      this.Navigation = JSON.parse(addressUrl)
    },
    methods: {
      ...mapActions([
        A_Tabs
      ]),
      handleOpen(key, keyPath) {
        // console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath);
      },
      jumpNavSwitch(nav, name, id) {
        this.activeMenuName = id;
        localStorage.set('activeName', id)
        this.$router.push({
          path: nav,
        })
      },
      layout() {
        this.$confirm('是否退出系统', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
          left: true
        }).then(() => {
          let success = data => {
            if (data.code === 'OK') {
              this.$router.push({
                path: '/'
              })
              localStorage.remove('url')
              localStorage.remove('user')
              localStorage.remove('activeName')
            } else {
              this.$message.error(data.msg)
            }
          }
          this.api.logout({}, success)
        })
          .catch(() => {
            this.$message.error('已取消')
          });
      },
      displayUser() {
        this.show = !this.show
      },
      getMenu() {
        this.isCollapse = !this.isCollapse;
      },
      removeTab(targetName) {
        this.G_Tabs.forEach((tab, index) => {
          if (tab.path === targetName) {
            let nextTab = this.G_Tabs[index + 1] || this.G_Tabs[index - 1];
          }
        })
        // this.G_Tabs= this.G_Tabs.filter(tab => tab.name !== targetName);
      }
    }
  }
</script>
<style>
  .el-header {
    padding: 0 !important;
    height: 50px !important;
  }

  .el-main {
    padding: 0 10px !important;
  }

  .el-aside aside dis-over-auto {
    width: 0 !important;
  }
</style>
<style lang="scss" scoped>

</style>
